<template>
    <div>
        <van-cell :icon="icon" :required="option.editable && option.required" :title="option.title" is-link @click="showInput" :label="label" v-if="option.editable "/>
        <van-cell v-else :title="option.title" :label="label" @click="preview(value)"></van-cell>
        <van-popup v-model="showDetail" style="width:80vw; min-height: 200px; display: flex; align-items: center; justify-content: center">
            <img :src="imgUrl"/>
        </van-popup>
        <van-popup v-model="show" position="bottom" v-if="show" >
            <div >
                <sign-canvas class="sign-canvas" ref="SignCanvas" :options="signOption" v-model="inputValue"/>
<!--                <vue-signature-pad width="80vw" height="300px" ref="signaturePad" class="sign-pad"/>-->
                <div class="btns">
                    <van-button type="danger" class="btn" @click="cancel">清空</van-button>
                    <van-button type="info" class="btn" @click="confirm">确定</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import SignCanvas from "./sign_canvas"
    import {mapGetters} from "vuex";
    import url from "../../url/url";
    import {ImagePreview} from "vant";
    export default {
        name: "sign",
        props:["option"],
        components:{
            SignCanvas
        },
        // computed:{
        //
        // },
        data(){
            return {
                show: false,
                value: "",
                inputValue:"",
                showDetail: false,
                imgUrl: "",
                signOption: {
                    canvasWidth: $(window).width() * 0.9, //canvas宽高 [Number] 可选
                    canvasHeight: 300,
                    isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                    isShowBorder: false, //是否显示边框 [可选]
                    writeWidth: 2
                }
            }
        },
        computed:{
            icon(){
                if(this.option.editable){
                    return "edit";
                } else {
                    return "";
                }
            },
            label(){
                if(!this.value){
                    return "未签名"
                } else {
                    return "已签名"
                }
            }
        },
        methods:{
            ...mapGetters(["token"]),
            showInput(){
                this.show = true
                this.$nextTick(() => {
                    if(this.value){
                        this.$refs.SignCanvas.draw(this.value)
                        // this.$refs.signaturePad.fromDataURL(this.value)
                    }
                })
                // console.log()
            },

            cancel(){
                this.$refs.SignCanvas.canvasClear();
                // this.value = ""
                // this.$refs.signaturePad.clearSignature()
            },

            confirm(){
                // console.log(this.value)
                // const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
                // this.value = data;
                this.value = this.inputValue
                this.show = false;

                if(this.value) {
                    this.$toast.loading({
                        message: '上传中...',
                        forbidClick: true,
                    });
                    $.ajax({
                        url: url.doUploadImage,//"/api/bpm/workflow/uploadImage",
                        type: "post",
                        headers: {
                            "Content-Type": "application/json",
                            // "Token": this.token
                        },
                        data: JSON.stringify({base64: this.value}),
                    }).then(r => {
                        this.$toast.clear(true)
                        if(r.success){
                            this.option.value = `[img]/api/bpm/workflow/download?path=${r.data}`
                        }
                        console.log(r)
                    }).fail(r => {
                        this.$toast.clear(true)
                    })
                }
                // console.log()
            },

            preview(value){
                if(value){
                    if(value.indexOf("[img]") === 0){
                        value = value.substring("[img]".length)
                        if(value.indexOf("http") !== 0){
                            value = `${API}${value}`
                        }
                    }
                    this.imgUrl = value
                    this.showDetail = true
                    console.log(value)
                    // ImagePreview([value])
                }
            }
        },
        mounted() {
            console.log(this.option)
            if(this.option.value){
                this.value = this.option.value
            }
        }
    }
</script>

<style scoped>
    .van-cell{
        text-align: left;
    }
    .sign-canvas{
        border: double 3px transparent;
        border-radius: 5px;
        background-image: linear-gradient(white, white),
        radial-gradient(circle at top left, #4bc5e8, #9f6274);
        background-origin: border-box;
        background-clip: content-box, border-box;
        margin: 10px;
    }
    .flx{
        display: flex;
    }
    .btns{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .btn {
        margin-left: 10px;
        margin-right: 10px;
        height: 34px;
        width: 100px;
    }
</style>
